<template>
    <div class="hist_">
        <div class="back1"><span class="el-icon-back" @click="Home1()">首页</span></div>
        <div class="back"><span class="el-icon-back" @click="return_()">返回</span></div>
        <!--表单-->
        <el-form :inline="true" style="margin-top:20px;">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="请输入查询条件：">
                        <el-input width="230" v-model="inputStr" placeholder="输入查询条件" style="width: 430px;">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8" style="text-align: right;padding-right:80px;">
                    <el-button-group>
                        <el-button type="primary" icon="el-icon-search" @click="queryUser()">查询
                        </el-button>
                        <el-button type="danger" icon="el-icon-tickets" @click="delete_hists()">删除选项
                        </el-button>
                        <el-button type="primary" icon="el-icon-circle-plus-outline" @click="getAllHists()">全部</el-button>
                    </el-button-group>
                </el-col>
                <el-col :span="2">
                </el-col>
                <el-col :span="2">
                    <el-button type="primary"  @click=" exportToExcel()">导出Excel</el-button>
                </el-col>
            </el-row>
        </el-form>
        <el-table :data="pageHist" border style="width: 100%" size="mini"
         @selection-change="handleSelectionChange" >
            <el-table-column type="selection">
            </el-table-column>
            <el-table-column type="index" label="序号" width="60">
            </el-table-column>
            <el-table-column prop="username" type="username" label="用户名" width="100">
            </el-table-column>
            <el-table-column prop="text" label="查询内容" width="300">
            </el-table-column>
            <el-table-column prop="Ner" label="实体结果" width="280">
            </el-table-column>
            <el-table-column prop="Re" label="关系结果" width="280">
            </el-table-column>
            <el-table-column prop="add_time"  label="搜索时间" width="150">
            </el-table-column>
            <el-table-column label="操作" width="60" align="center">
                <template slot-scope="scope">
                    <el-button type="danger" icon="el-icon-delete" size="mini" @click="delete_hist(scope.row)"></el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script>

export default {

    data() {
        return {
            //搜索数据行数
            total: 0,
            hists: [],
            baseURL: "http://127.0.0.1:8000/",
            user_name: '',
            inputStr: [],
            pageHist: [],
            searches:[],
        }
    },
    created() {
        let userName = JSON.parse(sessionStorage.getItem("user"))
        if (userName) {
            //userName.username==user.username  对应登录界面设置的key里面的value对应的数组值
            this.user_name = userName.username
            console.log("this.username:" + this.user_name)
            // console.log("this.password:" + this.password)
        }

    },
    mounted() {
        //加载页面时自动加载数据
        this.get_history();
    },
    methods: {

       
        //自动获取历史数据
        get_history() {
            let that = this
            this.$axios
                .post(that.baseURL + 'get_history/', {
                    username: that.user_name

                })
                .then((res) => {
                    if (res.data.code === 1) {
                        that.hists = res.data.data;
                        that.total = res.data.data.length;
                        console.log(that.hists,that.total)
                        that.getPageHist();
                        that.$message({
                            message: '历史记录数据获取成功',
                            type: 'success'
                        })
                    }
                    else {
                        that.$message.error('提取数据异常' + res.data.msg)
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        },
         //用于显示搜索的历史数据（获取页面）
        getPageHist() {
            //清空属性的数据
            this.pageHist = [];
            //获取当前页的数据
            for (let i = 0; i < this.total; i++) {
                //遍历数据放入
                this.pageHist.push(this.hists[i]);
                console.log(this.hists[i])
            }
        },
        //获取用户目前所有数据
        getAllHists() {
            //清空输入的inputStrist
            this.inputStr = "";
            //获取所有的数据
            this.get_history();
        },
        //退回到首页
        Home1() {
            this.$router.push('/');
        },
        //退回到搜索界面
        return_() {
            this.$router.push('/Search_user');
        },

        queryUser() {
            //使用post请求 传递inputstr
            let that = this
            this.$axios
                .post(
                    that.baseURL + "query_hist/",//路径
                    {//数据
                        inputstr: that.inputStr,
                        username: that.user_name
                    }
                )
                .then(function (res) {
                    if (res.data.code === 1) {
                        //数据给users
                        that.hists = res.data.data;
                        //返回数据的行数
                        that.total = res.data.data.length;
                        //获取当前数据
                        that.getPageHist();
                        that.$message({
                            message: '查询成功！',
                            type: 'success'
                        });
                    }
                    else {
                        //失败
                        that.$message.error(res.data.msg);
                    }
                })
                .catch(function (err) {
                    console.log(err);
                    that.$message.error("获取后端查询异常");
                })
        },
        //删除用户所选的一条历史记录
        delete_hist(row) {
            this.$confirm('是否删除该条搜索记录'+'用户名：'+row.username+'【时间：'+row.add_time+'】', '提示', {
                confirmButtonText: '确定删除',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let that = this
                this.$axios
                    .post(that.baseURL + 'delete_search/', {
                        username: row.username,
                        text: row.text,
                        add_time: row.add_time,
                        
                    })
                    .then((res) => {
                        if (res.data.code === 1) {
                            that.get_history();
                        }
                        else {
                            that.$message.error( res.data.msg)
                        }
                    })
                    .catch((err) => {
                        console.log(err);
                    })
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });

        },
        //复选时进行的操作
        handleSelectionChange(data){
            this.searchs = data;
            console.log(data)
        },
        //批量删除历史记录
        delete_hists(){
             this.$confirm('是否批量删除'+this.searchs.length+'条搜索记录：', '提示', {
                confirmButtonText: '确定删除',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let that = this
                this.$axios
                    .post(that.baseURL + 'delete_searches/', {
                        search:that.searches
                    })
                    .then((res) => {
                        if (res.data.code === 1) {
                            that.get_history();
                        }
                        else {
                            that.$message.error( res.data.msg)
                        }
                    })
                    .catch((err) => {
                        console.log(err);
                    })
                this.$message({
                    type: 'success',
                    message: '批量删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        //导出
        exportToExcel(){
            let that = this
            this.$axios
                    .get(that.baseURL + 'export_search_excel/')
                    .then((res)=>{
                        if(res.data.code===1){
                            //拼接
                           let url = that.baseURL+'media/'+res.data.name;
                           //下载
                            window.open(url);
                        }
                        else{
                            that.$message.error("导出Excel出现异常")
                       
                        }
                    })
                    .catch((err)=>{
                        console.log(err);
                    });
        }

    }
}
</script>
<style scoped>
.back {
    color: #797c7c;
    margin: 20px 10px 10px 10px;
}

.back1 {
    color: #6a6d6d;
    margin: 10px 10px 10px 10px;
}
</style>
